<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>

    <!-- 主要内容 -->
    <div class="login-content">
      <!-- 左侧信息区域 -->
      <div class="login-info">
        <div class="info-content">
          <h1 class="info-title">
            ZenithMind
            <span class="gradient-text">管理平台</span>
          </h1>
          <p class="info-subtitle">
            智能教育平台后台管理系统
          </p>
          <div class="info-features">
            <div class="feature-item">
              <el-icon><Setting /></el-icon>
              <span>平台统一管理</span>
            </div>
            <div class="feature-item">
              <el-icon><DataAnalysis /></el-icon>
              <span>数据可视分析</span>
            </div>
            <div class="feature-item">
              <el-icon><ChatDotRound /></el-icon>
              <span>AI运维助手</span>
            </div>
            <div class="feature-item">
              <el-icon><Monitor /></el-icon>
              <span>全局监控系统</span>
            </div>
          </div>
          <div class="info-stats">
            <div class="stat-item">
              <div class="stat-number">15+</div>
              <div class="stat-label">微服务模块</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">3K+</div>
              <div class="stat-label">API接口</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">99.9%</div>
              <div class="stat-label">系统稳定性</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form-container">
        <div class="login-form">
          <!-- 头部 -->
          <div class="form-header">
            <h2>管理员登录</h2>
            <p>请输入您的管理员账号和密码</p>
          </div>

          <!-- 登录表单 -->
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            @submit.prevent="handleLogin"
          >
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                ref="username"
                v-model="loginForm.username"
                placeholder="请输入用户名"
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-tooltip v-model="capsTooltip" content="大写锁定已开启" placement="right" manual>
              <el-form-item prop="password">
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model="loginForm.password"
                  :type="passwordType"
                  placeholder="请输入密码"
                  size="large"
                  clearable
                  @keyup="checkCapslock"
                  @blur="capsTooltip = false"
                  @keyup.enter="handleLogin"
                >
                  <template #prefix>
                    <el-icon><Lock /></el-icon>
                  </template>
                  <template #suffix>
                    <el-icon class="show-pwd" @click="showPwd">
                      <component :is="passwordType === 'password' ? 'View' : 'Hide'" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-tooltip>

            <!-- 验证码 -->
            <el-form-item prop="verificationCode">
              <div class="sms-container">
                <el-input
                  ref="verificationCode"
                  v-model="loginForm.verificationCode"
                  placeholder="请输入验证码"
                  size="large"
                  clearable
                  @keyup.enter="handleLogin"
                >
                  <template #prefix>
                    <el-icon><Message /></el-icon>
                  </template>
                </el-input>
                <el-button
                  :disabled="codeButtonDisabled"
                  @click="getVerificationCode"
                  class="sms-btn"
                  :class="{ 'counting': countDown > 0 }"
                >
                  {{ codeButtonText }}
                </el-button>
              </div>
            </el-form-item>

            <!-- 记住我 -->
            <div class="form-options">
              <el-checkbox v-model="loginForm.rememberMe">
                记住我
              </el-checkbox>
            </div>

            <!-- 登录按钮 -->
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                :loading="loading"
                @click="handleLogin"
                class="login-btn"
              >
                {{ loading ? '登录中...' : '登录' }}
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 开发者信息 -->
          <div class="system-info">
            <p>ZenithMind教育平台 - 管理员后台</p>
            <p>版本: v1.0.0</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { getLoginVerificationCode } from '@/api/user'
import {
  User, Lock, View, Hide, Message, Setting, 
  DataAnalysis, ChatDotRound, Monitor
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const loginFormRef = ref()
const username = ref()
const password = ref()
const verificationCode = ref()

const loginForm = reactive({
  username: 'admin',
  password: '123456',
  verificationCode: '',
  rememberMe: false
})

const loginRules = reactive({
  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
  verificationCode: [
    { required: true, trigger: 'blur', message: '请输入验证码' }, 
    { min: 6, max: 6, message: '验证码为6位数字', trigger: 'blur' }
  ]
})

const passwordType = ref('password')
const capsTooltip = ref(false)
const loading = ref(false)

// 验证码按钮相关
const countDown = ref(0)
const codeButtonDisabled = computed(() => countDown.value > 0 || !loginForm.username)
const codeButtonText = computed(() => countDown.value > 0 ? `${countDown.value}s后重新获取` : '获取验证码')

const showPwd = () => {
  if (passwordType.value === 'password') {
    passwordType.value = ''
  } else {
    passwordType.value = 'password'
  }
  nextTick(() => {
    password.value.focus()
  })
}

const checkCapslock = (e) => {
  const { key } = e
  capsTooltip.value = key && key.length === 1 && (key >= 'A' && key <= 'Z')
}

// 获取验证码
const getVerificationCode = async () => {
  if (!loginForm.username) {
    ElMessage.warning('请先输入用户名')
    return
  }

  try {
    await getLoginVerificationCode(loginForm.username)
    
    ElMessage.success('验证码已发送')
    
    // 启动倒计时
    countDown.value = 60
    const timer = setInterval(() => {
      countDown.value--
      if (countDown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error) {
    ElMessage.error(error.message || '获取验证码失败')
  }
}

const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        await userStore.login(loginForm)
        ElMessage.success('登录成功')
        
        const redirect = route.query.redirect || '/'
        router.push(redirect)
      } catch (error) {
        ElMessage.error(error.message || '登录失败，请检查用户名、密码和验证码是否正确')
      } finally {
        loading.value = false
      }
    }
  })
}

onMounted(() => {
  if (loginForm.username === '') {
    username.value.focus()
  } else if (loginForm.password === '') {
    password.value.focus()
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    
    &.circle-1 {
      width: 200px;
      height: 200px;
      top: 10%;
      left: 10%;
      animation: float 6s ease-in-out infinite;
    }
    
    &.circle-2 {
      width: 150px;
      height: 150px;
      top: 60%;
      right: 15%;
      animation: float 8s ease-in-out infinite reverse;
    }
    
    &.circle-3 {
      width: 100px;
      height: 100px;
      bottom: 20%;
      left: 20%;
      animation: float 10s ease-in-out infinite;
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.login-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 40px;
  gap: 60px;
  align-items: center;
}

.login-info {
  color: white;
  
  .info-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    
    .gradient-text {
      background: linear-gradient(45deg, #fff, #f0f8ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
  
  .info-subtitle {
    font-size: 1.25rem;
    margin-bottom: 40px;
    opacity: 0.9;
  }
  
  .info-features {
    margin-bottom: 40px;
    
    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      font-size: 1rem;
      opacity: 0.8;
    }
  }
  
  .info-stats {
    display: flex;
    gap: 40px;
    
    .stat-item {
      text-align: center;
      
      .stat-number {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
      }
      
      .stat-label {
        font-size: 0.9rem;
        opacity: 0.8;
      }
    }
  }
}

.login-form-container {
  .login-form {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    
    :deep(.el-input__wrapper) {
      padding: 0 15px;
      height: 48px;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
      
      &:hover, &:focus-within {
        box-shadow: 0 2px 12px rgba(30, 60, 114, 0.2);
      }
      
      .el-input__prefix {
        padding-right: 10px;
        color: #1e3c72;
      }
    }
    
    .form-header {
      text-align: center;
      margin-bottom: 30px;
      
      h2 {
        font-size: 1.8rem;
        font-weight: 600;
        color: #1e3c72;
        margin-bottom: 8px;
      }
      
      p {
        color: var(--el-text-color-secondary);
      }
    }
    
    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .login-btn {
      width: 100%;
      height: 48px;
      font-size: 1.1rem;
      border-radius: 12px;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      border: none;
      
      &:hover {
        background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(30, 60, 114, 0.3);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
    
    .system-info {
      margin-top: 40px;
      text-align: center;
      color: var(--el-text-color-secondary);
      font-size: 0.8rem;
      opacity: 0.7;
    }
  }
}

.sms-container {
  display: flex;
  gap: 12px;
  
  .el-input {
    flex: 1;
  }
  
  .sms-btn {
    white-space: nowrap;
    min-width: 120px;
    height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border: none;
    color: white;
    
    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(30, 60, 114, 0.3);
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
    }
    
    &.counting {
      background: #f5f7fa;
      color: #909399;
      border: 1px solid #dcdfe6;
    }
    
    &:disabled {
      background: #f5f7fa;
      color: #909399;
      border: 1px solid #dcdfe6;
      cursor: not-allowed;
    }
  }
}

.show-pwd {
  cursor: pointer;
}

// 响应式设计
@media (max-width: 1024px) {
  .login-content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 20px;
  }
  
  .login-info {
    text-align: center;
    
    .info-title {
      font-size: 2.5rem;
    }
    
    .info-stats {
      justify-content: center;
    }
  }
}

@media (max-width: 768px) {
  .login-form-container .login-form {
    padding: 30px 20px;
  }
  
  .login-info .info-title {
    font-size: 2rem;
  }
}
</style>
